<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 60%;
            margin: 20px auto;
        }

        .top {
            width: 80%;
            margin: 20px auto;
            display: flex;
            justify-content: space-around;
        }

        .top dl {
            /* width: 25%; */
            text-align: center;
        }

        .top dl dt {
            width: 180px;
            height: 200px;
        }

        .top dl img {
            width: 180px;
            height: 200px;
        }

        .top dl button {
            margin-left: 5px;
            display: none;
        }

        .top .active button {
            display: inline;
        }

        .active {
            border: 1px red solid;
        }

        /* .top dl:hover button{
            display: inline;
        }
        .top dl:hover{
            border: 1px red solid;
        } */
        table {
            width: 100%;
            background: black;
        }

        table tr {
            background: white;
            text-align: center;
        }

        table td img {
            width: 120px;
            height: 140px;
            vertical-align: middle;
        }

        table td input {
            width: 30px;
        }

        table td button {
            padding: 0 5px;
        }

        tbody img {}
    </style>
</head>

<body>
    <div class="box">
        <div class="top">
            <dl>
                <dt><img src="./img/22/a.PNG" alt=""></dt>
                <dd>全新升级高配电脑</dd>
                <dd>￥<span>3000</span><button onclick="add(this)">加入购物车</button></dd>
            </dl>
            <dl>
                <dt><img src="./img/22/b.PNG" alt=""></dt>
                <dd>电脑真皮沙发椅</dd>
                <dd>￥<span>1000</span><button onclick="add(this)">加入购物车</button></dd>
            </dl>
            <dl>
                <dt><img src="./img/22/c.PNG" alt=""></dt>
                <dd>好运和田玉礼盒</dd>
                <dd>￥<span>2000</span><button onclick="add(this)">加入购物车</button></dd>
            </dl>
            <dl>
                <dt><img src="./img/22/d.PNG" alt=""></dt>
                <dd>变频智能管控区</dd>
                <dd>￥<span>4000</span><button onclick="add(this)">加入购物车</button></dd>
            </dl>
        </div>
        <table border="0" cellspacing="1">
            <thead>
                <tr>
                    <th>全选</th>
                    <th>商品</th>
                    <th>数量</th>
                    <th>单价</th>
                    <th>操作</th>
                    <th>时间</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td><input type="checkbox"></td>
                    <td><img src="./img/22/a.PNG" alt=""><span>全新升级高配电脑</span></td>
                    <td><button type="button" onclick="jian(${arr[i].id})">-</button><input type="number"><button type="button" onclick="jia(arr[i].id)">+</button></td>
                    <td>￥3000</td>
                    <td><button type="button" onclick="del(${arr[i].id})">删除</button></td>
                    <td>times</td>
                </tr> -->
            </tbody>
            <tfoot>
                <tr>
                    <td><label><input type="checkbox" id="checkedAll">全选按钮</label></td>
                    <td colspan="3"><button type="button" onclick="delAll(this)">删除选中商品</button></td>
                    <td>已选择<span class="shuLiang"></span>件商品</td>
                    <td>总价：<span class="zongJia"></span></td>
                </tr>
            </tfoot>
        </table>
    </div>
    <script>
        var imgs = document.querySelectorAll('.top img');
        // var amount = document.querySelector()
        var tbody = document.querySelector('tbody');
        var shuLiang = document.querySelector('.shuLiang');
        var zongJia = document.querySelector('.zongJia');
        var checkedAll = document.querySelector('#checkedAll');

        diaoYong(starts());
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function () {
                this.parentElement.parentElement.classList.toggle("active");
            }
        }
        function add(e) {
            var img = e.parentElement.parentElement.firstElementChild.innerHTML;
            var names = e.parentElement.previousElementSibling.innerHTML;
            var price = e.previousElementSibling.innerHTML;
            var obj = {
                id: +new Date(),
                img: img,
                names: names,
                price: price,
                num: 1
            }
            chaChong(obj);
            diaoYong(starts());
        }

        function chaChong(obj) {
            var arr = localStorage.arr ? JSON.parse(localStorage.arr) : [];
            var result = arr.some(function (item, index) {
                return item.names === obj.names;
            })
            if (result) {
                jia(obj.names);
                return;
            }
            arr.push(obj);
            localStorage.arr = JSON.stringify(arr);
        }
        function diaoYong(arr) {
            var str = '';
            var str1 = 0;
            var str2 = 0;
            for (var i = 0; i < arr.length; i++) {
                var tt = arr[i].id;
                var t = times(new Date(tt));

                str += `<tr>
                            <td><input type="checkbox" ></td>
                            <td>${arr[i].img}<span>${arr[i].names}</span></td>
                            <td><button type="button" onclick="jian(${arr[i].id})">-</button><input class="num" type="number" value='${arr[i].num}'><button type="button" onclick="jia('${arr[i].names}')">+</button></td>
                            <td>￥${arr[i].price}</td>
                            <td><button type="button" onclick="del(${arr[i].id})">删除</button></td>
                            <td>${t}</td>
                        </tr>`;
                str1 += arr[i].num - 0;
                str2 += arr[i].price*arr[i].num ;

            }
            tbody.innerHTML = str;
            shuLiang.innerHTML = str1;
            zongJia.innerHTML = str2;
        }
        function jia(names) {
            var arr = starts();
            for (var i = 0; i < arr.length; i++) {
                if (names == arr[i].names) {
                    arr[i].num++
                }
            }
            localStorage.arr = JSON.stringify(arr);
            diaoYong(starts());
        }
        function times(t) {
            // var t = new Date();
            var shi = t.getHours();
            var fen = t.getMinutes();
            var miao = t.getSeconds();
            shi < 10 ? shi = "0" + shi : shi;
            fen < 10 ? fen = "0" + fen : fen;
            miao < 10 ? miao = "0" + miao : miao;
            return shi + ':' + fen + ':' + miao;
        }
        function starts() {
            var arr = localStorage.arr ? JSON.parse(localStorage.arr) : [];
            return arr;
        }
        function jian(id) {
            var arr = starts();
            for (var i = 0; i < arr.length; i++) {
                if (id == arr[i].id) {
                    arr[i].num--
                }
                if (arr[i].num <= 0) {
                    arr[i].num = 0;
                }
            }
            localStorage.arr = JSON.stringify(arr);
            diaoYong(starts());
        }
        function del(id) {
            var arr = starts();
            for (var i = 0; i < arr.length; i++) {
                if (id == arr[i].id) {
                    arr.splice(i, 1)
                }
                localStorage.arr = JSON.stringify(arr);
                diaoYong(starts());
            }
        }
        var ipt = document.querySelectorAll('tbody input');
        checkedAll.onclick = function() {
            
            for (var i = 0; i < ipt.length; i++) {
                ipt[i].checked = this.checked;
            }
            for (var i = 0; i < ipt.length; i++) {
                ipt[i].onclick = function() {
                    var all = true;
                    for (var j = 0; j < ipt.length; j++) {
                        if (!ipt[j].checked) {
                            all = false;
                            break;
                        }
                    }
                    checkedAll.checked = all;
                }
            }
        }
        /* function delAll(e){
            var arr = starts();
            for (var i = 0; i < ipt.length; i++) {
                if(ipt[i].checked){
                    arr.splice(i,1)
                }
            }
            localStorage.arr = JSON.stringify(arr);
                diaoYong(starts());
        } */
    </script>
</body>

</html>